<template>
    <div class="ranlist">
        <van-nav-bar
            title="追漫"
            left-arrow
            @click-left="onClickLeft"
        />
        <div class="list">
            <div class="list-left">
                <van-sidebar v-model="activeKey">
                    <van-sidebar-item @click="change(item)" :title="item.name" v-for="(item,index) in leftData" :key="index" />
                </van-sidebar>
            </div>
            <div class="list-right">
                <div class="list-right-top">{{title}}</div>
                <div class="list-right-item" v-for="(item,index) in rightData" :key="index">
                    <div class="item-number" :class="index<9?'size':'size1'">{{index+1}}</div>
                    <div class="item-img">
                        <img :src="item.vertical_cover" alt="">
                    </div>
                    <div class="item-title">
                        <div class="item-title-name">
                            {{item.title}}
                        </div>
                        <div class="item-title-bottom">
                            <div class="author auto-text">{{item.author}}</div>
                            <div class="item-title-bottom-item">{{item.styles}}</div>
                            <div v-if="item.is_finish===0">更新至{{item.total}}话</div>
                            <div v-if="item.is_finish===1">完结共{{item.total}}话</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name:"Ranklist",
        data(){
            return{
                activeKey: 0,
                id:7,
                leftData:[],
                rightData:[],
                title:'',
                // 加载是否完成
                IsLongding:false,
            }
        },
        created(){

            this.getData()
        },
        methods:{
            onClickLeft(){
                this.$router.go(-1);
            },

            getData(){
                this.$toast.loading({
                    message: '加载中...',
                    forbidClick: true,
                });
                this.axios({
                    methods:"GET",
                    url:"ListRank",
                    params:{}
                }).then(result=>{
                    this.$toast.clear()
                    this.leftData = result.data.data.list;

                    this.axios({
                        url:'GetRankInfo',
                        params:{
                            id:this.id,
                            offset:0,
                            subId:0
                        }
                    }).then(res=>{
                        this.title = res.data.data.description;
                        this.rightData = res.data.data.list;
                        let name = '';
                        for(let i = 0 ; i < this.rightData.length; i++){
                            if(this.rightData[i].author.length>=2){
                                for(let j = 0 ; j < this.rightData[i].author.length;j++){
                                    name += this.rightData[i].author[j] + " "
                                }
                            }else{
                                name = this.rightData[i].author[0]
                            }
                            this.rightData[i].author = name;
                            if(this.rightData[i].styles[0] != undefined){
                                this.rightData[i].styles = this.rightData[i].styles[0].name
                            }else{
                                this.rightData[i].styles = this.rightData[i].styles
                            }
                            
                        }

                    })
                })
            },

            change(item){
                this.id = item.id;
                this.getData()
            }
        }
    }
</script>

<style lang="less" scoped>
.size1{
    font-size: 20px !important;
}
.size{
    font-size: 30px !important;
}
.author{
    width: 100%;
}
.list-right{
    height: calc(100vh - 46px);
    overflow-y: auto;
}
.list-right-top{
    width: 100%;
    text-align: center;
    padding: 10px 0px;
    color: #888;
}
/deep/.van-icon{
    font-size: 20px;
}
.item-icon{
    margin-left: auto;
    padding-right: 10px;
}
.item-title-bottom-item{
    padding: 5px 0px;
}
.list{
    height: calc(100vh - 46px);
    overflow-y: auto;
    display: flex;
    .list-right{
        flex: 1;
        .list-right-item{
            width: 100%;
            display: flex;
            margin-bottom: 10px;
            .item-number{
                // font-size: 35px;
                font-weight: bold;
            }
            .item-img{
                height: 150px;
                border-radius: 5px;
                overflow: hidden;
                > img {
                    height: 100%;
                    display: block;
                }
            }
            .item-title{
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                padding:0px 5px;
                .item-title-name{
                    width: 100%;
                    font-size: 15px;
                }
                .item-title-bottom{
                    color: #888;
                    width: 150px;
                }
            }
        }
        .list-right-item:last-child{
            margin-bottom: 0px;
        }
    }
}
</style>